<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index与创建层叠上下文</title>
</head>
<style>
    body{
        margin:0 200px;
    }
    .box {
        position: absolute;
        background: #5e5e5e;
        /*↓打开此，会创建层叠上下文，本元素就会成为img的层叠上下文，img的z-index负值的层叠水平就比本元素的bg层叠水平高了*/
        /*z-index:0;*/
    }
    img{
        position:relative;
        margin-left:-50px;
        /*↓z-index负值只比最后一层的7层层叠水平高*/
        z-index: -1;
    }
</style>
<body>
    <div class="box">
        <img src="../../c.jpg" alt="">
    </div>
</body>
</html>
